<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import wsjzglService from '@/api/wsjzgl'
import { useMainStore } from '@/store/main'
import { mlxxMainStore } from '@/store/mlxx'
import { getFldm } from '@/utils/get-fldm'
import { cloneDeep } from 'lodash'
import detailItem from './components/detail-item.vue'
import bmDialog from '@/views/gdgl/gdzl/ajwjgl/dialog/bm-dialog.vue'

const emit = defineEmits(['wjlxChangeEvent'])

const store = useMainStore()
const mlxxStore = mlxxMainStore()

const bmDialogRef = ref()

// 入参

// 生命周期
onMounted(() => {
  // 获取分类代码
  getWjlx()
})

/*
 * 获取标签（分类代码）
 */
const wjlxList = ref<any>([])
const getWjlx = async () => {
  wjlxList.value = await getFldm('gd001')
  wjlxList.value = wjlxList.value.map((item: any) => {
    if (item.dm === 'gd0010001') {
      return {
        ...item,
        mlys: mlxxStore.mlxxData?.zwys,
        sjys: mlxxStore.mlxxData?.sjzwys,
      }
    }

    if (item.dm === 'gd0010002') {
      return {
        ...item,
        mlys: mlxxStore.mlxxData?.qfys,
        sjys: mlxxStore.mlxxData?.sjqfys,
      }
    }

    if (item.dm === 'gd0010003') {
      return {
        ...item,
        mlys: mlxxStore.mlxxData?.dgys,
        sjys: mlxxStore.mlxxData?.sjdgys,
      }
    }
  })
}

const activeName = ref('first')

/*
 * 刷新
 */
const refresh = () => {
  emit('wjlxChangeEvent', wjlxData.value.wjlxdm)
  checkboxData.value = []
}

/* 展示详情 */
const currentItem = ref<any>({})
const loadDetail = (item: any) => {
  // tabsList.value.splice(1, 1, {
  //   label: '影像',
  //   name: 'second',
  // })
  currentItem.value = { ...item }
}
/* 关闭详情 */
const closeDetail = () => {
  currentItem.value = {}
}

// 页码改变
const currentIndex = ref(0)
const indexChange = (index: any) => {
  currentIndex.value = index
  currentItem.value = wjxqxxList.value[index]
}

/*
 * tabs切换
 */

const wjlxData = ref({
  wjlxdm: 'gd0010001',
  wjlxmc: '正文',
})

// 缓存一下所有的操作
const cacheList = ref<any>([])
const wjxqxxList = ref<any>([])
const getWjxqxx = (data: any) => {
  wjxqxxList.value = data
  currentItem.value = data[currentIndex.value]
  loadDetail(currentItem.value)
  // 缓存
  cacheList.value = [cloneDeep(data)]
  currentIndex.value = 0
}

// 复选框绑定数据
const checkboxData = ref<any[]>([])

const ajxqLabel = computed(() => {
  if (store.nodeTreeData?.cj === '1') {
    return store.nodeTreeData?.mc
  } else if (store.nodeTreeData?.cj === '2') {
    if (store.nodeTreeData?.fbh === store.zjNode?.bh) return store.zjNode?.mc
    else if (store.nodeTreeData?.fbh === store.fjNode?.bh) return store.fjNode?.mc
    else return store.jzsmDbmNode?.mc
  }
  return store.nodeTreeData?.mc
})

// 预览
defineExpose({ getWjxqxx, indexChange })
</script>
<template>
  <div class="container">
    <el-tabs v-model="activeName" class="demo-tabs" type="card">
      <el-tab-pane :label="ajxqLabel" name="first">
        <!-- 展示详情 -->
        <detail-item
          :ajxqLabel="ajxqLabel"
          :current-index="currentIndex"
          class="detail-wrapper"
          @close="closeDetail"
          :wjxqxxList="wjxqxxList"
          @indexChange="indexChange"
        ></detail-item>
      </el-tab-pane>
    </el-tabs>

    <!-- 编目弹窗 -->
    <bmDialog ref="bmDialogRef" @refresh="refresh"></bmDialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dae4f1;
      padding-bottom: 5px;
      margin-bottom: 5px;
      .topLeft {
        display: flex;

        img {
          padding-right: 5px;
        }
        p {
          font-weight: 600;
        }
      }
    }
    .buttomGroup {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      .rowbutton {
        display: flex;
      }
    }

    .center {
      padding: 15px;
      background-color: #f7f8f9;
      // flex: 1;
      // flex-shrink: 0;
      height: 650px;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
  }
}

.export-excel {
  li {
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      background-color: #ecf5ff;
      color: #266df5;
    }
  }
}
.detail-wrapper {
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
</style>
